<template>
    <!-- 
        注释 
            强制组件刷新的三种方案：
            1、$forceUpdate   
                伪组件强制刷新 不能触发所有的生命周期钩子函数，只能触发beforeUpdate updated
                （1）在当前组件使用：触发beforeUpdate和updated两个钩子函数。

                在使用了$forceUpdate的父组件当中有子组件时，子组件会刷新吗？能否触发生命周期
                    （1）没用slot传值的：$forceUpdate  不能触发不带插槽的子组件的重新渲染;
                    （2）用了slot传值的：$forceUpdate  能触发带有插槽的子组件的重新渲染

            v-if使用它做组件强制刷新时能触发所有的生命周期钩子函数，是真正意义上的销毁与重建所有消耗比较大
            弊端 
                闪屏
                强制刷新时不建议使用

            key  使用它做组件强制刷新时能触发所有的生命周期钩子函数
                key是一个唯一的标识  不能重复 重复的key会造成渲染错误  修改key建议修改为Symbol
                它不会闪屏
                
    -->
    <div>
        <h1>reset component</h1>
        <el-button @click="testForceUpdate">测试 $forceUpdate</el-button>
        <!-- 测试在父组件中触发 $forceUpdate ，对子组件有没有影响 -->
        <TestForceA></TestForceA>
        <TestForceB>
            <h1>你好</h1>
        </TestForceB>
        <TestIf v-if="show"></TestIf>
        <el-button @click="show = !show">测试 v-if</el-button>

        <TestK :key="init" @bianK="change" slot-scope="scope">
            <p>{{scope.row}}</p>
        </TestK>
    </div>
</template>

<script>
import TestForceA from '@/components/Test/TestForceA';
import TestForceB from '@/components/Test/TestForceB';
import TestIf from '@/components/Test/TestIf';
import TestK from '@/components/Test/TestK';
export default {
    data() {
        return {
            show: true,
            init: 2
        }
    },
    components: {
        TestForceA,
        TestForceB,
        TestIf, TestK
    },
    methods: {
        testForceUpdate() {
            this.$forceUpdate();
        },
        change(k) {
            this.init = k
        }
    },
    beforeCreate() {
        console.log("ForceUpdate beforeCreate");
    },
    created() {
        console.log("ForceUpdatecreated");
    },
    beforeMount() {
        console.log("ForceUpdate beforeMount");
    },
    mounted() {
        console.log("ForceUpdate mounted");
    },
    beforeUpdate() {
        console.log("ForceUpdate beforeUpdate");
    },
    updated() {
        console.log("ForceUpdate updated");
    },
    beforeDestroy() {
        console.log("ForceUpdate beforeDestroy");
    },
    destroyed() {
        console.log("ForceUpdate destroyed");
    },
}
</script>

<style lang="scss" scoped>
div {
    height: 100px;
}
</style>